<template>
  <view class="huojia">
    <view class="header">
      <view class="headerTitle">职工安全币兑奖货柜</view>
      <view class="headerLeft">
        <view class="kuang" @click="callService">
          <image src="@/static/images/huojia/phone-icon.png"></image>
          <!-- <text>客服电话: 186 1830 1987</text> -->
          <text>客服电话: {{ huojiaItem.linkTel }}</text>
        </view>
      </view>
      <view class="headerRight">
        <view class="kuang" v-if="networkType != 'none'">
          <image src="@/static/images/huojia/wifi-icon.png"></image>
          <text>网络正常</text>
        </view>
        <view class="kuang noNetwork" v-if="networkType == 'none'">
          <image src="@/static/images/huojia/nowifi-icon.png"></image>
          <text>服务不可用</text>
        </view>
        <view class="kuang exit" @click="exit">
          <image src="@/static/images/huojia/exit-icon.png"></image>
          <text>退出</text>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="noticeBar">
        <view class="noticeBarIcon">
          <image src="@/static/images/huojia/tz-icon.png"></image>
        </view>
        <u-notice-bar
          :text="['货柜上新了，赶快领取吧！', '货柜上新了，赶快领取吧！']"
          :icon="''"
          color="#EB7C2D"
          fontSize="17rpx"
          bgColor="transparent"
          direction="column"
        ></u-notice-bar>
      </view>
      <view class="goodsContent">
        <view class="goodsList">
          <view
            class="goodsItem"
            :class="{ goodsItemOutOfPrint: !item.goodNum }"
            v-for="(item, index) in goodsList"
            :key="index"
          >
            <view class="goodsImg">
              <image :src="item.goodImg"></image>
              <view class="goodsStock" v-if="item.goodNum">库存: {{ item.goodNum }}</view>
            </view>
            <view class="goodFooter">
              <view class="left">
                <view class="price">{{ item.consumePoints }}</view>
                <view class="text">安全币</view>
              </view>
              <view class="right" @click="ljdhClick(item)">
                <text>立即兑换</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 详情 -->
    <goodsDetail v-if="isShowDetail" :goodsInfo="goodsInfo" @detailClose="detailClose"></goodsDetail>

    <!-- 货柜列表弹窗 -->
    <huoguiListDialog
      v-if="isShowHuoguiList"
      @handleConfirm="handleHuojiaConfirm"
      @handleClose="isShowHuoguiList = false"
    ></huoguiListDialog>

    <!-- 输入密码弹窗 -->
    <huoguiPsdDialog
      v-if="isShowPsd"
      :isShowPsd="isShowPsd"
      @handlePsdCancel="isShowPsd = false"
      @handlePsdConfirm="handlePsdConfirm"
    ></huoguiPsdDialog>
  </view>
</template>

<script>
import goodsDetail from "./components/goodsDetail.vue";
import huoguiListDialog from "./components/huoguiListDialog.vue";
import huoguiPsdDialog from "./components/huoguiPsdDialog.vue";
import { getContainerGoodsList, containerBuySuccess } from "@/common/api/huogui/huogui.js";

export default {
  components: {
    goodsDetail,
    huoguiListDialog,
    huoguiPsdDialog,
  },
  data() {
    return {
      huojiaItem: {}, //货柜信息
      isShowPsd: false, // 输入密码弹窗
      clickCount: 0, // 记录点击次数
      clickTimer: null, // 计时器
      isShowHuoguiList: false, //货柜列表弹窗
      isShowDetail: false, //商品详情
      goodsInfo: {}, //商品详情
      networkType: "", //网络类型
      goodsList: [
        // {
        //   id: 1,
        //   name: "维达超韧抽纸 3层-100抽10包 S",
        //   num: 20,
        //   img: require("@/static/images/huojia/goods.png"),
        //   price: 258,
        // },
        // {
        //   id: 2,
        //   name: "维达超韧抽纸 3层-100抽10包 S",
        //   num: 20,
        //   img: require("@/static/images/huojia/goods2.png"),
        //   price: 58,
        // },
      ], //商品列表
    };
  },
  onLoad() {
    uni.onNetworkStatusChange((res) => {
      this.networkType = res.networkType;
    });
  },
  onShow() {
    uni.getNetworkType({
      success: (res) => {
        this.networkType = res.networkType;
        if (uni.getStorageSync("huojiaId")) {
          this.getList(uni.getStorageSync("huojiaId"));
          this.huojiaItem = uni.getStorageSync("huojiaItem");
        } else {
          this.isShowHuoguiList = true;
        }
      },
    });
  },

  methods: {
    handlePsdConfirm(password) {
      console.log(password, "password");

      this.isShowPsd = false;
      this.isShowHuoguiList = true;
    },

    callService() {
      //  货柜更换绑定信息连续点击客服电话6次，弹出密码框输入密码后显示选择货柜列表
      this.onButtonClick();
    },
    onButtonClick() {
      // 如果是第一次点击，开始计时
      if (this.clickCount === 0) {
        this.clickTimer = setTimeout(() => {
          // 重置点击次数和计时器
          this.clickCount = 0;
          clearTimeout(this.clickTimer);
          this.clickTimer = null;
        }, 1000); // 设置间隔时间为1000毫秒
      }

      this.clickCount++; // 增加点击次数

      // 如果已经连续点击了6次，执行需要的操作
      if (this.clickCount === 6) {
        // 这里执行连续点击6次后的逻辑
        this.isShowPsd = true;
        // 重置点击次数和计时器
        this.clickCount = 0;
        clearTimeout(this.clickTimer);
        this.clickTimer = null;
      }
    },
    // 退出
    exit() {
      // #ifdef APP-PLUS
      plus.runtime.quit();
      return true; //return true的意思是禁止返回到上一个界面
      // #endif
    },
    // 选择货柜
    handleHuojiaConfirm(item) {
      this.isShowHuoguiList = false;
      uni.setStorageSync("huojiaId", item.id);
      uni.setStorageSync("huojiaItem", item);
      this.huojiaItem = item;
      this.getList(item.id);
    },
    detailClose() {
      this.isShowDetail = false;
      this.getList(uni.getStorageSync("huojiaId"));
    },
    getList(conId) {
      // this.goodsList = [];
      // for (let index = 0; index < 80; index++) {
      //   this.goodsList.push({
      //     id: index + 1,
      //     name: "维达超韧抽纸 3层-100抽10包 S",
      //     num: index == 3 ? 0 : 20,
      //     img:
      //       index % 2 == 0 ? require("@/static/images/huojia/goods.png") : require("@/static/images/huojia/goods2.png"),
      //     price: index % 2 == 0 ? 258 : 58,
      //   });
      // }

      getContainerGoodsList({ conId }).then((res) => {
        if (res && res.code == 200 && res.data) {
          console.log(res.data, "res.data");
          this.goodsList = res.data.map(item => {
            return {
              ...item,
              goodNum: item.goodNum || 0,
              consumePoints: item.consumePoints || 0,
            };
          });
        }
      });
    },
    ljdhClick(item) {
      console.log(item, "item");
      if (item.goodNum) {
        console.log(111);

        this.goodsInfo = item;
        this.isShowDetail = true;
      } else {
        uni.showToast({
          title: "商品已售完",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.huojia {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);

  .header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 150rpx;
    padding: 37.5rpx 18.75rpx 0;
    background-image: url("~@/static/images/huojia/header.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 150rpx;
    color: #ffffff;
    font-size: 13rpx;
    line-height: 1;

    .headerTitle {
      position: absolute;
      left: 50%;
      top: 15.94rpx;
      transform: translateX(-50%);

      font-weight: 800;
      font-size: 24rpx;
      color: #ffffff;
      letter-spacing: 2rpx;
      text-shadow: 0 6rpx 4rpx #082bd9;
    }

    .kuang {
      display: flex;
      align-items: center;
      width: max-content;
      padding: 6.56rpx 9.38rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 40rpx;
      border: 1rpx solid rgba(255, 255, 255, 0.3);

      /* opacity: 0.5; */
      image {
        width: 18.75rpx;
        height: 18.75rpx;
        margin-right: 5.63rpx;
      }
    }

    .noNetwork {
      background: #ee0a24;
      border: 1rpx solid rgba(255, 255, 255, 0.3);
    }

    .headerLeft,
    .headerRight {
      display: flex;
      align-content: center;
    }

    .headerRight {
      .kuang {
        margin-left: 15rpx;
      }
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 150rpx + 58.13rpx);
    transform: translateY(-58.13rpx);
    background: #edeff5;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding: 9.38rpx 30rpx;
    overflow: hidden;

    .noticeBar {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 12.19rpx 15.94rpx;
      margin-bottom: 20.63rpx;
      background: #fdf3da;
      border-radius: 60rpx;

      .noticeBarIcon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20.63rpx;
        height: 18.75rpx;
        min-width: 20.63rpx;
        min-height: 18.75rpx;
        max-width: 20.63rpx;
        max-height: 18.75rpx;
        margin-right: 17.81rpx;

        > image {
          width: 100%;
          height: 100%;
        }
      }

      /deep/.u-notice-bar {
        padding: 0;
      }
    }

    .goodsContent {
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;

      .goodsList {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* 两列 */
        gap: 11.25rpx 11.25rpx;

        .goodsItem {
          .goodsImg {
            position: relative;
            width: 164rpx;
            height: 164rpx;
            min-width: 164rpx;
            min-height: 164rpx;
            max-width: 164rpx;
            max-height: 164rpx;
            background: rgba(245, 247, 252, 0);
            border-radius: 11rpx 11rpx 0rpx 0rpx;

            > image {
              width: 100%;
              height: 100%;
              border-radius: 11rpx 11rpx 0rpx 0rpx;
            }

            .goodsStock {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              padding: 4.69rpx 13.13rpx;
              background: rgba(28, 28, 71, 0.2);
              backdrop-filter: blur(10px);

              font-size: 14rpx;
              color: #ffffff;
              white-space: normal;
              word-break: break-all;
              word-wrap: break-word;
              line-break: anywhere;
            }
          }

          .goodFooter {
            display: flex;
            align-items: center;
            min-height: 60rpx;
            padding: 4.96rpx 7.5rpx;
            background: #ffffff;
            border-radius: 0rpx 0rpx 11rpx 11rpx;

            .left {
              flex: 1;
              flex-wrap: wrap;
              display: flex;
              align-items: flex-end;

              .price {
                font-weight: bold;
                font-size: 30rpx;
                color: #fa6400;
                line-height: 28rpx;
                /* letter-spacing: 1rpx; */

                white-space: normal;
                word-break: break-all;
                word-wrap: break-word;
                line-break: anywhere;
              }

              .text {
                /* margin-left: 2rpx; */
                font-size: 13rpx;
                color: #54587a;
              }
            }

            .right {
              display: flex;
              justify-content: center;
              align-items: center;
              min-width: 71rpx;
              height: 32rpx;
              background: linear-gradient(270deg, #4285f9 0%, #1e4df0 100%);
              border-radius: 19rpx;

              text {
                /* font-weight: bold; */
                font-size: 12rpx;
                color: #ffffff;
                /* transform: scale(0.9); */
              }
            }
          }
        }

        .goodsItemOutOfPrint {
          .goodsImg {
            &::before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(255, 255, 255, 0.7);
            }

            &::after {
              content: "";
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 113.44rpx;
              height: 70.31rpx;

              background-image: url("~@/static/images/huojia/ysw.png");
              background-repeat: no-repeat;
              background-position: center;
              background-size: 113.44rpx 70.31rpx;
            }
          }

          .goodFooter {
            .left {
              .price {
                color: #54587a;
              }

              .text {
                color: #54587a;
              }
            }

            .right {
              background: linear-gradient(270deg, #d3d3d3 0%, #b8b8b8 100%);
            }
          }
        }
      }
    }
  }
}
</style>
